<template>
	<view class="login-box">
        <view class="height-100 position-re" v-if="isCanUse == false">
		 <view class="min-bg ">
			 <image  src="https://storage-family-care.ganorglobal.com/static/parent/homePage/login_bg.png" mode=""></image>
		 </view>
		 <view class="login-form " v-if="authorize == true">
				<view class="login-main" v-if="noAccount == false">					
					<view class="mobile-tit">手机号-登陆</view>
					<view class="txts">
						<input type="number" v-model="formData.mobile" placeholder="请输入手机号" class="phone">
					</view>
					<view class="txts code">
						<input type="password" v-model="formData.password" placeholder="请输入密码" class="txt-code" style="width: 500rpx;">
					  <!-- <text>获取验证码</text> -->
					</view>

					<view class="sub_login" @click="mobile_bind">登录</view>
					<!-- <view class="regist" @tap="showRegister">账号注册></view> -->
				</view>
				<!-- <view v-if="noAccount">
					<view class="login-phone">手机号注册</view>
					<view class="phone">
						<input class="uni-input " v-model="reg_mobile" placeholder-style='margin-top:15rpx;' focus placeholder="请输入手机号" />
					</view>
					<view class="phone">
						<input class="uni-input input" v-model="reg_sms_code" placeholder-style='margin-top:15rpx;' focus placeholder="请输入短信验证码" /><text class="code" @click="getSmsCode">{{smsDesc}}</text>
					</view>
					 <view class="button" >完善宝宝信息</view>
				</view> -->
		 </view>

		 <view class="login-form bg_half_black " v-else>
			 <view class="width-100 height-100 position-re login-image">
				 <image class="" :src="LOGIN_MODEL"></image>
				<view class="sub_login position-ab" @click="getCode()">授权登录</view>
				
			 </view>
				
		 </view>
		 
        </view>
		 <!-- #ifdef MP-WEIXIN -->
		 <view v-else>
			 <view>
				 <view class='header'>
					 <image :src='miniapp_logo'></image>
				 </view>
				 <view class='content'>
					 <view>申请获取以下权限</view>
					 <text>获得你的公开信息(昵称，头像、地区等)</text>
				 </view>

				 <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
					 授权登录
				 </button>
			 </view>
		 </view>
		 <!-- #endif -->
		 <view class="copyright-login" >
		 	<copyRight></copyRight>
		 </view>
	</view>
</template>

<script>
	import copyRight from '../../components/copyright.vue';
	export default {
		components : {
			copyRight 
		},
		data() {
			return {
				authorize : false,
				noAccount : false,
				userInfo : {
				},
				formData : {
					mobile : '',
					password:''
				},
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				isCanUse: getApp().globalData.isCanUse || false ,//默认为true
				managerList : [
					'openid'
				],
				loginIndex : false,
				login_bg:this.config.DEFAULT_LOGIN_BG,
				miniapp_logo:this.config.DEFAULT_MINIAPP_LOGO,
				brand:this.config.DEFAULT_BRAND,
				LOGIN_MODEL:this.config.LOGIN_MODEL
			}
		},
		onLoad(option) {
			//默认加载
			this.loginIndex = option.login_index == 1 ? true : false;
			
		},
		onShow() {
			this.isFirstLogin()
		},
		methods:{
			isFirstLogin(){
				let that = this;
				if(!uni.getStorageSync('storage_info')) {
					console.log('login-index-login-fail','用户从未授权过转到小程序介绍页')
					if(that.loginIndex == false){
						uni.reLaunch({
							url:'login-index'
						})
					}
				}else {
					console.log('login-index-login-success','已经授权过转到登陆页')
				}
			},
			getMangerList(){
				console.log('asdasdasd');
				let that = this;
				this.common.http.request('/api/v1/wx/index/white/open/id','GET',{},res => {
					if(res.data.code == 0 && res.data.data != '') {
						that.managerList = res.data.data
					}
				},false)
				return ;
			},
			getCode() {
				this.login();
			},
			 //第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						try {
							_this.isCanUse = false;
							// uni.setStorageSync('isCanUse', false);//记录是否第一次授权  false:表示不是第一次授权
							getApp().globalData.isCanUse = false//记录是否第一次授权  false:表示不是第一次授权
							// _this.updateUserInfo();
							_this.login();
						} catch (e) {}
					},
					fail(res) {}
				});
			},
			login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
			   // 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						let cryptData = {};
						if (!_this.isCanUse) {
							//非第一次授权获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
	　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
									let nickName = infoRes.userInfo.nickName; //昵称
									let avatarUrl = infoRes.userInfo.avatarUrl; //头像
									cryptData = infoRes;
									uni.setStorageSync('storage_info', 1)
									//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
									_this.common.http.request('/wx/auth/login','POST',{code:code,app_id:_this.config.APP_ID}, res => {
										if(res.data.code == 0){
											let goManager = false;
											_this.managerList.map(manager => {
												if(manager == res.data.data.open_id) {
													return goManager = true;
												}
											});
											if(goManager == true){
												uni.redirectTo({
													url:'manager-login?open_id='+res.data.data.open_id
												})
												return ;
											}
											
											getApp().globalData.WXUserInfo = res.data.data
											let param = {
													iv:cryptData.iv,
													encrypted_data:cryptData.encryptedData,
													session_key:res.data.data.session_key,
													open_id: res.data.data.open_id
													// app_id:_this.config.APP_ID
											}
											_this.common.http.request('/wx/auth/parse','POST', param , res_info => {
												if(res_info.data.code == 0){
													_this.userInfo = res_info.data.data.wx_info;
													//openId、或SessionKdy存储//隐藏loading
													getApp().globalData.userInfo = res_info.data.data.wx_info;
													uni.hideLoading();
													if (res_info.data.data.parent_info) {
														
														getApp().globalData.currentCustomer = res_info.data.data.parent_info;
														getApp().globalData.access_token = res_info.data.data.parent_info.token;
														//已绑定手机号
														uni.reLaunch({
															url : '../index/index',
														});
													} else {
														_this.authorize = true;
													}
												} else {
													return ;
												}
											})
										} else {
											uni.hideLoading()
											uni.showToast({
												icon:'none',
												title:res_info.data.message
											})
											
											return
										}
									},false)
								},
								fail(e) {
									_this.isCanUse = true;
									_this.wxGetUserInfo();
									uni.hideLoading();
								}
							});
						} else {
							this.isCanUse = true;
							this.wxGetUserInfo();
						}
					},
				});
			},
			mobile_bind () {
				if (this.formData.mobile.length != 11 ){
					uni.showToast({
						icon:'none',		
						title: '手机号不正确'
					});
					return
				}
				if (this.formData.password.length < 6){
					uni.showToast({
						icon:"none",
						title: '密码最少长度为6为'
					});
					return
				}
				console.log('111',this.userInfo);
				this.common.http.request('/wx/auth/bind','POST',{
					account_name : this.formData.mobile,
					password : this.formData.password,
					open_id : this.userInfo.open_id
				}, bindInfo => {
					if(bindInfo.data.code == 0) {
						getApp().globalData.userInfo = bindInfo.data.data;
						// getApp().globalData.currentCustomer = bindInfo.data.data.account.customers[0];
						getApp().globalData.access_token = bindInfo.data.data.token;
						
						//添加登录依据
						uni.setStorageSync('isLogin',true)
						
						uni.reLaunch({
							url:'../index/index'
						})
						
					} else {
						uni.showToast({
							icon:'none',
							title:'登陆错误：'+ bindInfo.data.message
						})
					}
				},false)


			},
			showRegister() {
				uni.navigateTo({
					url:'../regist/regist'
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.bg_half_black {
		
		background-color: rgba(0, 0, 0, .8);
	}
	.login-phone{
		font-size:48rpx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(51,51,51,1);
		letter-spacing:1rpx;
	}
	.phone{
		margin-top: 56rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height:90rpx;
		// background:rgba(255,255,255,1);
		border-bottom:1rpx solid #efefef;
		font-size:24rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(239, 239, 244, 1);
	}
	.code{
		font-size:32rpx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(182,29,36,1);
	}
	.button{
		background:rgba(182,29,36,1);
		width:417rpx;
		height:98rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius:43rpx;
		text-align: center;
		line-height: 98rpx;
		border:1rpx solid rgba(151,151,151,1);
		color: #fff;
	}
	.regist{
		font-size:32rpx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(215,58,70,1);
		margin: 0 auto;
		margin-top: 42rpx;
		text-align: center;
		
	}
	.login-box {
		height: 100vh;
		position: relative;
		.min-bg{
			width:100%;
			height: 100%;
			background-size: 100%;
			image{
				width:100%;
				height: 100%;
			}
		}
		.login-form{
			width:100%;
			position: absolute;
			top: 0;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius:8rpx;
			z-index: 2;
			.login-image {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 631rpx;
				height: 754rpx;
				image {
					width: 631rpx;
					height: 754rpx;
				}
			}
			
			.login-main {
				background-color: rgba(255, 255, 255, .8);
				padding: 40rpx 50rpx;
				border-radius: 47rpx;
				width: 690rpx;
				height: 600rpx;
			}
			.mobile-tit{
				font-size:48rpx;
				color:#333;
				margin-bottom:20rpx;
				font-weight:600;
			}
			.txts{
				border-bottom:1px solid #ddd;
				margin-bottom:54rpx;
				.phone{
					height:80rpx;
					line-height:80rpx;
					font-size:30rpx;
					color:#666;
				}
				.txt-code{
					height:80rpx;
					padding: 0 20rpx;
					line-height:80rpx;
					font-size:30rpx;
					color:#666;
				}
			}
			.code{
				height:80rpx;
				line-height:80rpx;
				display:flex;
				justify-content: space-between;
				text{
					font-size:32rpx;
					color:#B61D24;
				}
			}
			.sub_login{
				width:417rpx;
				height:100rpx;
				line-height: 100rpx;
				background:linear-gradient(301deg,rgba(155, 225, 177, 1) 0%,rgba(114, 204, 186, 1) 100%);
				border-radius:81rpx;
				text-align: center;
				color:#fff;
				font-size:30rpx;
				margin: 80rpx auto 40rpx;
				bottom: 0;
			}
		}
	}

</style>
<style lang="scss" scoped>
    .header {
        margin: 90rpx 0 90rpx 50rpx;
        border-bottom: 1px solid #ccc;
        text-align: center;
        width: 650rpx;
        height: 300rpx;
        line-height: 450rpx;
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
    }

    .content {
        margin-left: 50rpx;
        margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 40rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
    }
	.copyright-login{
		width:100%;
		position: fixed;
		top: 93%;
	}
</style>
